/*********通用样式文件***********/
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  // height: 100%;
  // overflow-y: scroll;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.container {
  width: 1210px;
}

.width-100 {
  width: 100%;
}
.height-100 {
  height:100%;
}
.transparent{
  opacity: 0;
}
.block {
  display: block;
}
.inline-block{
  display: inline-block;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
  margin: 0;
  td {
    padding: 0;
    display: table-cell;
  }
}

body {
  width: 100%;
  font-size: 12px;
  color: $dark;
  background-color: $bg-gray;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  line-height: 1.5;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
}

.relative {
  position: relative;
}

.pointer {
  cursor: pointer;
}

.grab {
  cursor: -webkit-grab;
}

.hide {
  display: none;
}

.unselectable {
  user-select: none;
}

.content {
  width: 100%;
  flex: 100;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/**********背景样式************/
.bg-danger {
  background-color: $red-darker;
}
.bg-blue{
  background-color: $blue;
}
.bg-light-danger {
  background-color: $light-red;
}

.bg-success {
  background-color: $green;
}

.bg-warning {
  background-color: #FEC163;
}

.bg-white {
  background-color: $white;
}

.bg-gray {
  background-color: $bg-gray;
}

.bg-dark {
  background: #464c5b;
}
.bg-deep-darker {
  background: #2b2c34;
}

.bg-darker {
  background: #363e4d;
}

.bg-pink-dark {
  background-color: #F6707C;
}

.bg-dark-gray {
  background-color: $border-darker;
}

.bg-primary {
  background-color: $light-primary;
}
/*********颜色配置**********/
.color-danger {
  color: $red;
}

.color-light-danger {
  color: $light-red;
}

.color-warning {
  color: $orange;
}

.color-white {
  color: $white;
}

.color-dark {
  color: $dark;
}

.color-gray {
  color: #9a9a9a;
}

.color-light-gray {
  color: #ACB3D4;
}

.color-light {
  color: rgba(255,255,255,.8);
}

.color-light-blue {
  color: $light-blue;
}

.color-dark-gray {
  color: $gray-darker;
}

.color-success {
  color: $green;
}

.color-primary {
  color: $primary;
}

.color-blue {
  color: $blue;
}
/************字体样式************/
.font-normal {
  font-size: 14px;
}

.font-mini {
  font-size: 12px;
}

.font-big {
  font-size: 16px;
}

.font-1x {
  font-size: 18px;
}

.font-2x {
  font-size: 20px;
}

.font-3x {
  font-size: 22px;
}

.font-4x {
  font-size: 24px;
}

.font-5x {
  font-size: 26px;
}

.font-6x {
  font-size: 32px;
}

.font-50 {
  font-size: 50px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.line-ellispsis-2 {
  display: -webkit-box;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-ellispsis-1 {
  display: -webkit-box;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.block-center {
  margin: 0 auto;
}

.content-body {
  height: 90%;
  -webkit-overflow-scrolling: touch;
}

.font-bold {
  font-weight: 600;
}

.padding-tb-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.padding-t-10 {
  padding-top: 10px;
}

.padding-t-20 {
  padding-top: 20px;
}

.padding-rl-0 {
  padding-right: 0 !important;
  padding-right: 0 !important;
}

.padding-tb-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-rl-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.padding-r-10 {
  padding-right: 10px;
}

.padding-l-10 {
  padding-left: 10px;
}

.padding-10 {
  padding: 10px;
}

.padding-0 {
  padding: 0;
}

.padding-tb-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.padding-tb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padding-rl-20 {
  padding-right: 20px;
  padding-left: 20px;
}

.padding-tb-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.padding-rl-5 {
  padding-right: 5px;
  padding-left: 5px;
}

.padding-r-5 {
  padding-right: 5px;
}

.padding-l-5 {
  padding-left: 5px;
}

.padding-t-5 {
  padding-top: 5px;
}

.padding-b-5 {
  padding-bottom: 5px;
}

.padding-b-10 {
  padding-bottom: 10px;
}

.margin-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.margin-r-2 {
  margin-right: 2px;
}
.margin-10 {
  margin: 10px;
}

.margin-tb-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.margin-b-10 {
  margin-bottom: 10px;
}
.margin-b-15 {
  margin-bottom: 15px;
}

.margin-t-10 {
  margin-top: 10px;
}

.margin-t-20 {
  margin-top: 20px;
}

.margin-t-5 {
  margin-top: 5px;
}

.margin-b-5 {
  margin-bottom: 5px;
}

.margin-b-4 {
  margin-bottom: 4px;
}

.margin-rl-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.margin-rl-8 {
  margin-right: 8px;
  margin-left: 8px;
}

.margin-tb-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.margin-rl-1 {
  margin-right: 1px;
  margin-left: 1px;
}
.margin-rl-5 {
  margin-right: 5px;
  margin-left: 5px;
}

.margin-r-5 {
  margin-right: 5px;
}

.margin-l-5 {
  margin-left: 5px;
}

.margin-l-10 {
  margin-left: 10px;
}

.margin-r-10 {
  margin-right: 10px;
}

.margin-r-20 {
  margin-right: 20px;
}

.margin-l-20 {
  margin-left: 20px;
}

.margin-rl-20 {
  margin-left: 20px;
  margin-right: 20px;
}

.margin-b-20 {
  margin-bottom: 20px;
}

.margin-l-6 {
  margin-left: 6px;
}

.margin-r-6 {
  margin-right: 6px;
}
/***********flex样式************/

.flex-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-start-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.flex-start-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
}
.flex-center-start {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-end-center{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.flex-center-end{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.flex-col-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.flex-col-end-center{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.flex-col-end-start{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items:flex-start;
}
.flex-col-end-end{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex-col-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.flex-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.flex-space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-space-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}


.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}



.flex-col-space-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.align-items-stretch{
  align-items: stretch;
}
.flex-item {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}
/*********传统浮动样式***********/
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clear-float {
  overflow: hidden;
}
//border

.border-1px-t {
  border-top: 1px solid #ddd;
}

.border-1px-r {
  border-right: 1px solid #ddd;
}

.border-1px-l {
  border-left: 1px solid #ddd;
}

.border-1px-b {
  border-bottom-color: #ddd;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.border-1px {
  border: 1px solid #ccc;
}

.border-dark {
  border-color: #404346;
}
.border-success{
  border-color: $success;
}
.link-img {
  display: block;
  width: 100%;
  overflow: hidden;

  img {
    float: left;
    width: 100%;
  }
}

.border-box {
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}

.button {
  padding: 4px 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.button-warning {
  color: #FF7043;
  border-color: #FF7043;
}

.button-success {
  color: $success;
  border-color: $success;
}

.button-danger {
  color: $red;
  border-color: $red;
}

.button-warning:active {
  color: $white;
  background-color: #FEC163;
}

.badge {
  padding: 1px 7px;
  border-radius: 1px;
  font-size: 10px;
}

.badge-danger {
  background-color: rgba(254,200,201,1);
  color: $white;
}

.badge-gray {
  background-color: $gray-darker;
  color: $white;
}

.border-r-3 {
  border-radius: 3px;
}

.border-r-5 {
  border-radius: 5px;
}

.line-height-normal {
  line-height: 1.2;
}

.border-dashed {
  border: 1px dashed $border-gray;
}

.width-10 {
  width: 10%;
}

.width-20 {
  width: 20%;
}

.width-30 {
  width: 30%;
}

.width-40 {
  width: 40%;
}

.width-50 {
  width: 50%;
}

.width-60 {
  width: 60%;
}

.width-70 {
  width: 70%;
}

.width-80 {
  width: 80%;
}

.width-90 {
  width: 90%;
}
/************* 10 列栅格 ***************/
.width-col-1{
  width:100%;
}
.width-col-2{
  width:50%;
}
.width-col-3{
  width:33.333%;
}
.width-col-4{
  width:25%;
}
.width-col-5{
  width:20%;
}
.width-col-6{
  width:16.666%;
}
.width-col-7{
  width:14.286%;
}
.width-col-8{
  width:12.5%;
}
.width-col-9{
  width:11.111%;
}
.width-col-10{
  width:10%;
}
